<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 1000px;
            height: 500px;
            background-color: orange;
            /*1. 元素是跟着主轴来排列的 */

            /* 默认主轴为行，从左往右 */
            flex-direction: row;
            /* 从右往左排列 */
            /* flex-direction: row-reverse; */
            /* 主轴设置为y轴，列，从上到下 */
            /* flex-direction: column; */


            /* 2.justify-content设置主轴上的子元素排列方式 */

            /* 居中对齐 */
            justify-content: center;
            /* 平均分配剩余空间 */
            /* justify-content: space-around; */
            /* 先贴两边，中间的空间在平均分配 */
            /* justify-content: space-between; */


            /* 3.flex-wrap设置主轴子元素是否换行，默认不换行 */
            /* flex-wrap: nowrap; */
            flex-wrap: wrap;

            /* 4.align-items:center设置垂直居中,适用于单行 */
            /* align-items: center; */



            /* 5.align-content:center设置垂直居中,适用于多行,这样中间就没有很大的那种空隙了 */
            align-content:center;
            /* 紧贴在上下沿 */
            /* align-content: space-between; */
        }


        div span {
            width: 250px;
            height: 150px;
            background-color: red;
            margin: 5px;
        }
    </style>
</head>

<body>
    <!-- 通过给父盒子添加display:flex属性，来控制子盒子的位置和排列方式 -->
    <!--常见父元素的属性：
                    flex-direction:设置主轴(默认主轴为x方向，即行，水平向右)方向
                    justify-content:设置主轴的子元素排列方式
                    flex-wrap:设置子元素是否换行，默认不换行，如果装不下，会压缩盒子
                    align-content:设置侧轴(默认侧轴为y方向，即列，垂直向下)上的子元素排列方式（多行）
                    align-items:设置侧轴上的子元素排列方式（单行）
                    flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
                    
                    单行多行的判断标志是：是否有flex-wrap:wrap,若有，则是换行，属于多行
       !-->

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>

</html>